@function px2rem($px) {
  @return 100 / 1920  * $px + vw;
}

body, html {width: 100%; height: 100%; overflow: hidden;}
body {
  background-color: #ffb43d;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/bg.png");
  background-repeat: repeat;
  background-position: 100% 0;
  background-size: auto 100%;
}
.imgBox {
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.center {position: relative;}
.center img { width: 100%;height: 100%;}
.block {
  position: absolute;
  cursor: pointer;
  width: 31%;
  height: 33%;
  &.block1 {
    top: 26.3%;
    left: 1.5%;
  }
  &.block2 {
    top: 26.3%;
    left: 34.3%;
  }
  &.block3 {
    top: 26.8%;
    left: 67.6%;
  }
  &.block4 {
    top: 61.6%;
    left: 1.5%;
  }
    &.block5 {
      top: 61.6%;
      left: 34.3%;
    }
    &.block6 {
      top: 61.6%;
      left: 67.6%;
    }
}


.dialog {
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  bottom:0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed;
  left:0;
  top:0;
  bottom:0;
}


.wrapBox{
  width: px2rem(1611);
  height: px2rem(827);
  background: url("../img/menhu/diaobg.png") no-repeat;
  background-size: contain;
  position: relative;
  .blockClose {
    width: px2rem(80);
    height: px2rem(80);
    position: absolute;
    left: px2rem(1466);
    top:px2rem(58);
    cursor: pointer;
  }
}

.carouselWrap {
  width: px2rem(1411);
  height: px2rem(712);
  position: absolute;
  top:6.2%;
  left:2%;
}

.swiper-container {
   width: px2rem(1411);
   overflow: hidden;
   .swiper-slide {
       width: px2rem(1411);
       height: px2rem(712);
       img {
         width: 100%;
         height: 100%;
      }
   }
}

.swiper-pagination {
    margin-left: - px2rem(140);
    left: 50%;
    bottom: - px2rem(31);
   .swiper-pagination-bullet {
      opacity: 1;
      width: px2rem(24);
      height: px2rem(24);
      margin: 0 px2rem(18);
      background: url("../img/dot.png") no-repeat;
      background-size: contain;
   　　outline:none;
      &.swiper-pagination-bullet-active {
        background: url('../img/dot-active.png') no-repeat;
        background-size: contain;
      }
   }
}

